<template>
  <div class="box">
    <el-form
      :model="ruleForm"
      :inline="false"
      ref="ruleForm"
      label-width="220px"
      class="demo-ruleForm"
      size="medium"
      :rules="rules"
    >
      <!-- <h2 class="tle">业务申请信息填写</h2> -->
      <div class="must">
        <!--<el-form-item label="联系人：" prop="contacts">-->
        <!--<el-input v-model="ruleForm.contacts" placeholder="请填写联系人"></el-input>-->
        <!--<div class="inform">-->
        <!--<img src="../../assets/imgs/inform.png" alt="通知" />-->
        <!--<div class="content">-->
        <!--<span>示例：北京市xxx网络科技有限公司/张三</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="代理机构名称：" prop="nameAgen">-->
        <!--<el-input v-model="ruleForm.nameAgen" placeholder="请填写代理机构名称"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="变更后代理机构名称：" prop="nameAgency">-->
        <!--<el-input v-model="ruleForm.nameAgency" placeholder="请填写变更后代理机构名称"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="变更后文件接收人类型：" prop="picType">
          <span id="star">*</span>
          <el-select v-model="ruleForm.chtype" @change="BtypeChange" placeholder="变更后文件接收人类型">
            <el-option
              v-for="(item,index) in options_b"
              :label="item.title"
              :key="index"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

          <!-- 身份证照片(正反面) -->
        <el-form-item prop="picType"
        label="接收人身份证照片(正反面)："
        v-if="ruleForm.chtype==1"
        :rules=" {  required: true,validator:DBLicense,trigger: 'change'  }">
          <upfile :callback="backCardImage" :file_config="{name:3}">
            <img :src="mconfig.host+ruleForm['picdbcard']" v-if="ruleForm['picdbcard']" />
          </upfile>
          <span style="color:#f96900">请上传 身份证正反面 的清晰图片(jpg,png格式),图片大小不能超过500k</span>
          <div class="exam-img">
            <div class="img-inform">
              <img src="../../assets/imgs/inform.png" />
              <span>示例:</span>
            </div>
            <examimg :imgType="1"></examimg>
          </div>
        </el-form-item>

        <!-- 身份证正面 -->
        <el-form-item prop="idimag"
        label="接收人身份证照片(正面)："
        v-if="ruleForm.chtype==1"
        :rules=" {  required: true,validator:idcardAddrLicense,trigger: 'change'  }">
          <upfile :callback="backIdimag" :file_config="{name:2}">
            <img :src="mconfig.host+ruleForm['idimag']" v-if="ruleForm['idimag']" />
          </upfile>
          <div class="exam-img">
            <div class="img-inform">
              <img src="../../assets/imgs/inform.png" />
              <span>示例:</span>
            </div>
            <examimg :imgType="2"></examimg>
          </div>
          <span style="color:#f96900">请上传 身份证正面 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>
        <!-- 变更后文件接收人营业执照： -->
        <el-form-item label="接收人营业执照："
        v-if="ruleForm.chtype==1 || ruleForm.chtype==0"
        :rules="(ruleForm.chtype == 0) ?{  required: true,validator:bussiAddrLicense,trigger: 'change'  }:[]">
          <upfile :callback="backBussimg" :file_config="{name:33}">
            <img :src="mconfig.host+ruleForm['bussimg']" v-if="ruleForm['bussimg']" />
          </upfile>
          <div class="exam-img">
            <div class="img-inform">
              <img src="../../assets/imgs/inform.png" />
              <span>示例:</span>
            </div>
            <examimg :imgType="0"></examimg>
          </div>
          <span style="color:#f96900">请上传 营业执照 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>

        <!-- 其他合法执照 -->
        <el-form-item label="接收人其它证件："
        v-if="ruleForm.chtype==9"
        :rules=" {  required: true,validator:otherImgLicense,trigger: 'change'  }">
          <upfile :callback="backBussimg" :file_config="{name:23}">
            <img :src="mconfig.host+ruleForm['bussimg']" v-if="ruleForm['bussimg']" />
          </upfile>
          <div class="exam-img">
            <div class="img-inform">
              <img src="../../assets/imgs/inform.png" />
              <span>示例:</span>
            </div>
            <examimg :imgType="0"></examimg>
          </div>
          <span style="color:#f96900">请上传 其他合法执照 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>

        <el-form-item label="变更后文件接收人名称：" prop="nameReceiver">
          <el-input v-model="ruleForm.nameReceiver" placeholder="请填写变更后文件接收人名称"></el-input>
        </el-form-item>
        <el-form-item label="变更后文件接收人地址：" prop="addrReceiver">
          <el-input v-model="ruleForm.addrReceiver" placeholder="请填写变更后文件接收人地址"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />

            <div class="content">
              <span>示例：XX省XX市XX区XX路XX号</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="变更后邮政编码：" prop="recCodePostal">
          <el-input v-model="ruleForm.recCodePostal" placeholder="请填写变更后文件接收人地址"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />

            <div class="content">
              <span>示例：610000</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="商标申请号/注册号：" prop="appCode">
          <el-input v-model="ruleForm.appCode" placeholder="请填写商标申请号/注册号"></el-input>
        </el-form-item>
        <el-form-item label="是否共有商标：" prop="radio">
          <el-radio-group v-model="ruleForm.radio" @change="radioChange">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="其他共有申请人：" v-if="ruleForm.radio=='1'">
          <both
            :callback="getBoth"
            :append="$store.state.alterData.append"
            :class_id="$route.query.id"
          ></both>
        </el-form-item>
        <!--<div  class="common">-->
        <!--<el-form-item label="其他共有人" prop="person_type"></el-form-item>-->
        <!--<div v-for="(item,index) in ruleForm.common" :key="index">-->
        <!--<el-form-item label="共有人名义(中文)" -->
        <!--:key="item.key"-->
        <!--:prop="'common.' + index + '.partNameCh'"-->
        <!--:rules="{required: true, message: '选项不能为空', trigger: 'blur'}">-->
        <!--<el-input v-model="item.partNameCh" placeholder="请填写姓名"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="共有人名义(英文)" prop="person_type">-->
        <!--<el-input v-model="item.partNameEn" placeholder="请填写姓名"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="共有人地址(中文)" -->
        <!--:key="item.key"-->
        <!--:prop="'common.' + index + '.partAddrCh'"-->
        <!--:rules="{required: true, message: '选项不能为空', trigger: 'blur'}">-->
        <!--<el-input v-model="item.partAddrCh" placeholder="请填写地址"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="共有人地址(英文)" prop="person_site">-->
        <!--<el-input v-model="item.partAddrEn" placeholder="请填写地址"></el-input>-->
        <!--</el-form-item>-->
        <!--</div>-->
        <!--<div class="appends-btn">-->
        <!--<el-button icon="el-icon-plus" @click="plus" circle></el-button>-->
        <!--<el-button icon="el-icon-minus" @click="dele" v-if="ruleForm.common.length > 1" circle></el-button>-->
        <!--</div>-->
        <!--</div>-->
        <el-form-item class="upload" label="网上确认书：" prop="afterAmount">
          <upfile :callback="setSure">
            <img :src="old_imgs['qrfile']" v-if="old_imgs['qrfile']" />
          </upfile>
          <div class="exam-img">
            <div class="img-inform">
              <img src="../../assets/imgs/inform.png" />
              <span>示例:</span>
            </div>
            <examimg :imgType="4"></examimg>
          </div>
        </el-form-item>
        <div>
          <span class="informs">
            请点此
            <a :href="mconfig.host + '/file/download?fileType=2'">下载网上确认书</a>,查到相应商标编号并填充
          </span>
          <br />
          <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span>
        </div>

        <el-form-item label="其他附件：" prop="dengjichenluofile" style="margin-top:10px">
          <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'dengjichenluofile'}" :list="ruleForm.dengjichenluofile"></uploads>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提示：其他附件</span>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="btns" style="margin-top:30px">
            <el-button type="info" @click="outStep">上一步</el-button>
            <el-button type="primary" @click="submitCheck('ruleForm')">提交并审核</el-button>
          </div>
        </el-form-item>
        <el-dialog
          class="dialog"
          :show-close="false"
          :center="true"
          :visible.sync="dialogVisible"
          width="460px"
          :before-close="handleClose"
        >
          <div class="hint">
            <img src="../../assets/imgs/branch.png" alt="提示图片" />
            <span>选择您想去办理的网点</span>
          </div>
          <el-form-item label="选择网点：" prop="value" >
            <el-select v-model="ruleForm.branchNetworkId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              >
                <span style="float: left">{{ item.deptName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <div slot="footer" class="dialog-footer">
            <el-button type="info" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog
          class="hintMsg"
          :show-close="false"
          title="温馨提示"
          :visible.sync="centerDialogVisible"
          width="462px"
        >
          <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="skip">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>

  </div>
</template>
<script>
import BaseUpload from "./BaseUpload";
import upfile from "../common/upfile.vue";
import both from "../common/both.vue";
import examimg from "../common/imgExample";
import uploads from "../common/uploads";
export default {
  data() {
    return {
      //网点列表
      options: [],
      //变更后文件接收人类型
      options_b: [],
      //提交成功弹出框变量
      centerDialogVisible: false,
      //网点弹出框控制变量
      dialogVisible: false,
      // add:0,
      //表单唯一id
      classId: "",
      //填写的信息
      ruleForm: {
        //        contacts: "",
        //        nameAgen: "",
        //        nameAgency: "",
        nameReceiver: "",
        addrReceiver: "",
        appCode: "",
        upload: "",
        radio: "0",
        branchNetworkId: "",
        recCodePostal: "",
        dengjichenluofile:[],

        picdbcard: "", //新增字段内容
        chtype: 0,
        //共有人模板
        common: [
          {
            partNameCh: "",
            partNameEn: "",
            partAddrCh: "",
            partAddrEn: "",
          },
        ],
      },
      rules: {
        //        contacts:[
        //          { required: true, message: "选项不能为空", trigger: "blur" },
        //          {
        //              pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
        //            message: "请输入正确的机构名称",
        //            trigger: "blur",
        //          },
        //        ],
        //        nameAgen:[
        //          { required: true, message: "选项不能为空", trigger: "blur" },
        //          {
        //              pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
        //            message: "请输入正确的机构名称",
        //            trigger: "blur",
        //          },
        //        ],
        //        nameAgency:[
        //          { required: true, message: "选项不能为空", trigger: "blur" },
        //          {
        //              pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
        //            message: "请输入正确的机构名称",
        //            trigger: "blur",
        //          },
        //        ],
        // upload: [
        //   {
        //     required: true,
        //     message: "请上传变更后文件接收人身份证(正反面)",
        //     trigger: "blur",
        //   },
        // ],
        // idimag: [
        //   {
        //     required: true,
        //     message: "请上传变更后文件接收人身份证(正面)",
        //     trigger: "blur",
        //   },
        // ],
        // bussimg: [
        //   {
        //     required: true,
        //     message: "请上传变更后文件接收人营业执照",
        //     trigger: "blur",
        //   },
        // ],
        // dengjichenluofile: [
        //   { required: true, message: "附件不能为空", trigger: "change" },
        // ],
        nameReceiver: [
          { required: true, message: "选项不能为空", trigger: "blur" },
          {
            pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
            message: "请输入正确的机构名称",
            trigger: "blur",
          },
        ],
        addrReceiver: [
          { required: true, message: "选项不能为空", trigger: "blur" },
          {
            message: "你的地址格式不正确",
            trigger: "blur",
          },
        ],
        appCode: [
          { required: true, message: "选项不能为空", trigger: "blur" },
          {
            pattern: /^\d{0,30}$/,
            message: "请填写正确的商标申请号/注册号",
            trigger: "blur",
          },
        ],
        radio: [{ required: true, message: "选项不能为空", trigger: "blur" }],
        upload: [{ required: true, message: "选项不能为空", trigger: "blur" }],
        recCodePostal: [
          { required: true, message: "选项不能为空", trigger: "blur" },
          {
            pattern: /^[1-9]{1}(\d){5}$/,
            message: "邮编格式错误",
            trigger: "blur",
          },
        ],
      },
      old_imgs: {
        qrfile: "",
      },
      img_default: {
        // idimag: "",
        // bussimg: "",
      },
    };
  },
  mounted() {
    this.options_b = this.mconfig.options;
    //获取从存储在路由中的classId
    this.classId = this.$route.query.id;
    //获取网点列表
    this.$http.get("/trademark/system/dept/findDept").then((res) => {
      this.options = res.data.data;
    });
    // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    if (this.$store.state.alterData.public) {
      this.ruleForm.upload = "1";
      this.ruleForm.common = this.$store.state.alterData.append;
      let formDa = {};
      Object.assign(
        formDa,
        this.$store.state.alterData.data,
        this.$store.state.alterData.public
      );
      let {
        //        contacts,
        //        nameAgen,
        //        nameAgency,
        nameReceiver,
        addrReceiver, // 变更后文件接收人地址
        recCodePostal,
        appCode,
        chtype,
        idimag,
        bussimg,
        // picdbcard,
        commStatus,
        iddbimage,//身份证正反面
        branchNetworkId,
        otherfile,
        // ageName,
        // appNum,
        // appCount,
        // appDate,
        // decTraAppModel,
        // decTraApp,
        file,
        // appExpl,
        // appModel,
        // classId,
        // branchNetworkId,
        // busimg,
        // receCn,
        // serIte,
        qrfile,
      } = formDa;
      //      this.ruleForm.contacts = contacts;
      //      this.ruleForm.nameAgen = nameAgen;
      //      this.ruleForm.nameAgency = nameAgency;
      this.ruleForm.nameReceiver = nameReceiver;
      this.ruleForm.addrReceiver = addrReceiver;
      this.ruleForm.recCodePostal = recCodePostal;
      this.ruleForm["dengjichenluofile"] = JSON.parse(otherfile);
      // this.ruleForm.checkList = typeof decTraApp == "object" ? decTraApp : [];
      this.ruleForm.appCode = appCode;
      this.ruleForm.chtype = chtype;
      this.ruleForm.idimag = idimag;
      this.ruleForm.bussimg = bussimg;
      this.ruleForm.picdbcard = iddbimage;
      // console.log(this.ruleForm.idimag,"idimg")
      // this.confirmationimg[0] = file internal
      this.ruleForm.radio = commStatus;
      // this.ruleForm.type = appModel;
      // this.classId = classId;
      this.ruleForm.branchNetworkId = Number(branchNetworkId);
      if (qrfile) {
        this.old_imgs.qrfile = this.mconfig.host + qrfile;
      }
      if (file) {
        this.old_imgs.file = this.mconfig.host + file;
      }
    }
  },
  // watch: {
  //   //通过数据监听的方式将共有人模板中的信息同步到ruleForm.commonArr中
  //   common: {
  //     handler(newName, oldName) {
  //       this.common.forEach((item, index) => {
  //         this.ruleForm.commonArr[index].partNameCh = item.value;
  //         this.ruleForm.commonArr[index].partNameEn = item.englishValue;
  //         this.ruleForm.commonArr[index].partAddrCh = item.site;
  //         this.ruleForm.commonArr[index].partAddrEn = item.englishSite;
  //       });
  //     },
  //     deep: true,
  //   },
  // },
  methods: {
    backUrl(url,file_config){
        this.ruleForm[file_config["field"]].push(url)
    },
    delUrl(index,file_config){
        this.ruleForm[file_config["field"]].splice(index,1)
        this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
    },
    getBoth(value) {
      this.ruleForm.common = value;
    },
    idcardAddrLicense(rule, value, callback) { //验证规则
        if (this.ruleForm.idimag) {
            callback();
        } else {
            callback(new Error("请上传身份证证件"));
        }
    },
    DBLicense(rule, value, callback) { //验证规则
        if (this.ruleForm.picdbcard) {
            callback();
        } else {
            callback(new Error("请上传身份证正反面"));
        }
    },
    bussiAddrLicense(rule, value, callback) { //验证规则
        if (this.ruleForm.chtype==0) {
          console.log(11111111111);
          if (this.ruleForm.bussimg) {
              callback();
          } else {
              callback(new Error("请上传营业执照"));
          }
        }
    },
    otherImgLicense(rule, value, callback) { //验证规则
      if (this.ruleForm.chtype==9) {
        if (this.ruleForm.bussimg) {
            callback();
        } else {
            callback(new Error("请上传其他合法执照"));
        }
      }
    },
    //变更后后收件人类型
    BtypeChange() {
      this.img_default = {
        idimag: "",
        bussimg: "",
        picdbcard: "",
      };
      this.ruleForm.nameReceiver = "";
      this.ruleForm.addrReceiver = "";
    },


    //身份证双面
    backCardImage(files) {
      // this.ruleForm.picdbcard = files;
      // this.img_default.picdbcard = "";
      if (files.length > 0) {
        let from_data = new FormData();

        from_data.append("picdbcard", files[0]);
        from_data.append("picType", 1);
        this.$http({
          method: "post",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          url: "/trademark/distinguish/picdis",
          data: from_data,
        }).then((res) => {
          console.log( res.data.data.picpath,"?////后端数据显示")
          //营业执照回显
          this.ruleForm.picdbcard = res.data.data.picpath
            ? res.data.data.picpath
            : "";
          // if (res.data.data.po.name) {
          //   this.ruleForm.addrReceiver = res.data.data.po.address;
          //   this.ruleForm.nameReceiver = res.data.data.po.name;
          // }
        });
      } else {
        //如果传递会的没有文件,说明是删除,应该做删除操作
        this.ruleForm.picdbcard = "";
        this.ruleForm.addrReceiver = "";
        this.ruleForm.nameReceiver = "";
      }
    },
    //上传省份后回调
    backIdimag(files) {
      if (files.length > 0) {
        let from_data = new FormData();
        from_data.append("picidcard", files[0]);
        from_data.append("picType", 1);
        this.$http({
          method: "post",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          url: "/trademark/distinguish/picdis",
          data: from_data,

        }).then((res) => { console.log(this.ruleForm.idimag,"sddddddddddddd")
          //省份证回显
          console.log(res.data.data.id_card,"生生世世是")
          if (res.data.data.id_card != ""){
            this.ruleForm.idimag = res.data.data.id_card
            ? res.data.data.id_card
            : "";

          }

          if (res.data.data.pic.name) {
            this.ruleForm.addrReceiver = res.data.data.pic.address;
            this.ruleForm.nameReceiver = res.data.data.pic.name;
          }
        });
      } else {
        //如果传递会的没有文件,说明是删除,应该做删除操作
        this.ruleForm.idimag = "";
        this.ruleForm.addrReceiver = "";
        this.ruleForm.nameReceiver = "";
      }
    },
    backBussimg(files) {
      if (files.length > 0) {
        let from_data = new FormData();
        from_data.append("picbussi", files[0]);
        from_data.append("picType", 1);
        this.$http({
          method: "post",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          url: "/trademark/distinguish/picdis",
          data: from_data,
        }).then((res) => {
          //营业执照回显
          console.log(res.data.data.popath,"223dssdafaf")

          this.ruleForm.bussimg = res.data.data.popath
            ? res.data.data.popath
            : "";
          if (res.data.data.po.name) {
            this.ruleForm.addrReceiver = res.data.data.po.address;
            this.ruleForm.nameReceiver = res.data.data.po.name;
          }
        });
      } else {
        //如果传递会的没有文件,说明是删除,应该做删除操作
        this.ruleForm.bussimg = "";
        this.ruleForm.addrReceiver = "";
        this.ruleForm.nameReceiver = "";
      }
    },
    radioChange() {
      if (this.ruleForm.radio == "1") {
        if (this.ruleForm.common.length == 0) {
          this.plus();
        }
      }
    },
    // 提交并审核验证
    submitCheck(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate((valid) => {
        // console.log(valid, 25);
        if (valid && this.ruleForm.upload == "1") {
          this.dialogVisible = true;
        } else if (this.ruleForm.upload == "") {
          this.open1("请上传网上确认书", "error");
        } else if (!valid) {
          this.open1("存在错误的格式填写", "error");
        }
      });
    },
    //确认书
    setSure(files) {
      if (files.length > 0) {
        this.ruleForm.upload = "1";
        this.ruleForm.qrfile = files[0];
      } else {
        this.ruleForm.upload = "";
        this.ruleForm.qrfiles = "";
      }
    },
    //返回上一步
    outStep() {
      this.$emit("wp", 1, "请填写申请业务信息");
    },
    //提示模板
    open1(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },
    //弹出框的选项确认框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //点击添加更变许可人
    plus() {
      // let objCommom = JSON.parse(JSON.stringify(this.ruleForm.commonArr[0]));
      // this.ruleForm.commonArr.push(objCommom);
      //let objValue = JSON.parse(JSON.stringify(this.common[0]))
      this.ruleForm.common.push({
        partNameCh: "",
        partNameEn: "",
        partAddrCh: "",
        partAddrEn: "",
      });
    },
    dele() {
      this.ruleForm.common.pop();
    },
    //表单提交事件
    submitForm(formName) {
      ////console.log(this.$store.state.type)
      let _this = this;

      if (this.ruleForm.branchNetworkId != "") {
        //每次提交重新生成新的FormData用于储存新的数据
        var formData = new FormData();
        this.dialogVisible = false;
        //获取vuex中保存的步骤二中的数据
        // let {
        //   name, //主体名称
        //   names, //申请人姓名
        //   englishName, // 英文名称
        //   number, // 证件编号
        //   person_type, // 证件类别
        //   site, // 地址信息
        //   phone, // 电话号码
        //   postal, // 邮政编码
        //   nationality, // 申请人国籍/地区
        //   englishSite, // 英文地址
        //   numbers, // 证件号码
        //   province, //所属省份
        //   city, // 城市
        //   legal, // 法人代表
        // } = this.$store.state.storeDatas;
        let arr = this.$store.getters.getRuleForm;
        for (let key in arr) {
          formData.append(key, arr[key]);
        }
        //向FormData中添加数据
        // 公共信息
        // formData.append(
        //   "idcardimg",
        //   this.$store.state.id_card_info
        //     ? this.$store.state.id_card_info.id_card
        //     : ""
        // ); //身份证正反面地址
        // formData.append(
        //   "idcardface",
        //   this.$store.state.id_card_info
        //     ? this.$store.state.id_card_info.url
        //     : ""
        // ); //身份证正面地址
        // formData.append(
        //   "busimg",
        //   this.$store.state.company_card_info
        //     ? this.$store.state.company_card_info.url
        //     : ""
        // ); //营业执照地址
        //公共部分
        formData.append("addrReceiver", this.ruleForm.addrReceiver); //变更后文件接收人地址 ?
        // formData.append("appAddCn", site); // 申请地址
        // formData.append("appAddrCn", site); //申请人地址（中文）?
        // formData.append("appAddrEn", englishSite); // 申请人地址（英文） ?
        formData.append("appCode", this.ruleForm.appCode); // 商标申请号/注册号 ?
        formData.append("chtype", this.ruleForm.chtype); // 接收人证件类型
        formData.append("idimag", this.ruleForm.idimag); // 接收人身份证
        formData.append("bussimg", this.ruleForm.bussimg); // 接收人营业执照
        formData.append("iddbimage", this.ruleForm.picdbcard); //
        // formData.append("appCodePostal", postal); // 邮政编码 ?
        // formData.append("appName", names); // 申请人名字 ?
        // formData.append("appNameCn", names); // 申请人名称（中文） ?
        // formData.append("appNameEn", englishName); // 申请人名称（英文） ?
        // formData.append("appliType", person_type); // 申请人类型(0企业1个人) ?
        formData.append("branchNetworkId", this.ruleForm.branchNetworkId); //网点编号 ?
        // // formData.append("busAddress", busAddress); //营业执照地址
        // // formData.append("busCode", busCode);//营业执照号码
        // // formData.append("busName", busName);//营业执照公司名称
        // formData.append("cardNum", numbers); //证件号码

        formData.append("classId", this.$route.query.id); // 本条记录对应业务在24种业务表里的编号
        formData.append("commStatus", this.ruleForm.radio); // 是否共有商标：（是否）
        //          formData.append("contacts", this.ruleForm.contacts); //联系人
        // formData.append("corrections", corrections); //更正事项
        // formData.append("faRen", legal); //法人
        // // formData.append("idAddress", idAddress); //身份证地址
        // formData.append("name", name); // 业务名称
        //          formData.append("nameAgen", this.ruleForm.nameAgen); //代理机构名称
        //          formData.append("nameAgency", this.ruleForm.nameAgency); // 变更后代理机构名称
        formData.append("nameReceiver", this.ruleForm.nameReceiver); // 变更后文件接收人名称
        // formData.append("phone", phone); // 电话
        this.ruleForm.radio == 1 &&
          formData.append("proAppends", JSON.stringify(this.ruleForm.common));
        formData.append("recCodePostal", this.ruleForm.recCodePostal); // 变更后邮政编码
        // formData.append("remarks", remarks); //备注
        // formData.append("subStatus", subStatus); //状态 1保存 2选择通过 3选择未通过 4未审核
        // formData.append("userId", userId); //用户id
        //我的
        formData.append("qrfiles", this.ruleForm.qrfile || {}); //确认书
        formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile)); //其他出质人
        // formData.append("optype", 1);

        //请求地址
        let urls = "";
        if (this.$store.state.alterData.public) {
          formData.append("id", this.$store.state.alterData.public.id);
          urls = "trademark/proTChAgent/modifyNoCommit";
        } else {
          urls = "trademark/proTChAgent/firstSubmit";
        }
        //配置请求头
        var config = {
          header: {
            "Content-Type": "multipart/form-data",
          },
        };
        // axios向后端发送数据
        this.$http
          .post(urls, formData, config)
          .then(function (response) {
            //若状态码不为200则不跳转
            if (response.data.code != 200) {
              _this.open1("提交失败", "error");
              return;
            }

            _this.centerDialogVisible = true;
          })
          .catch(function (error) {});
      } else {
        this.open1("请选择网点编号", "error");
        return false;
      }
    },
    //跳转函数
    skip() {
      this.centerDialogVisible = false;
      this.open1("操作成功");
      this.$router.push({
        path: "/business/myBusiness/auditing",
      });
    },
    //重置表单函数(没用上)
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  components: {
    BaseUpload,
    upfile,
    both,
    examimg,
    uploads
  },
};
</script>
<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 20px;
  }
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  // margin-top: 100px;
  width: 100%;
  min-height: 800px;
  .tle {
    font-size: 24px;
    color: #000;
  }
  .must,
  .select {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 30px;
    margin-bottom: 80px;
    // width: 1000px;
    // border: 1px solid #bbbbbb;
    border-radius: 10px;
    .el-form-item {
      width: 680px;
    }
    .el-input {
      width: 80%;
    }
    .inline {
      display: flex;
      .el-form-item {
        margin: 0;
        width: 290px !important;
      }
    }
  }
  .must {
    margin-bottom: 20px;
  }
  .line {
    width: calc(100% - 280px);
    margin: 10px auto;
    height: 1px;
    border-top: 1px dashed #d9d9d9;
  }
  .imgHint {
    margin: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #f5222d;
  }
  .affirm {
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  .input {
    width: 190px;
  }
  .upload {
    margin: 20px 0;
  }
  .type-number {
    width: 250px;
  }
  .informs {
    position: absolute;
    width: 500px;
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  .inform {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 80%;
    width: 300px;
    height: 32px;
    color: #f96900;
    font-size: 10px;
    line-height: 14px;
    img {
      margin: 11px;
    }
    .content {
      display: flex;
      flex-direction: column;
      .ts {
        text-indent: 3em;
      }
    }
  }
  .notice {
    color: #f00;
    font-size: 12px;
  }
  .tle {
    list-style: none;
    margin: 40px 0 20px;
    font-size: 24px;
    & ~ .tle {
      color: #bbb;
    }
  }
  .hint {
    color: #f96900;
    background-color: #fff;
    .el-form-item__label {
      width: 150px;
    }
    img {
      width: 20px;
    }
  }
  .el-steps {
    width: 70%;
    height: 200px;
  }
  .el-button {
    //display: block;
    display: inline;
    margin: 0 20px;
    // background-color: #67c23a !important;
    // border-color: #67c23a !important;
  }
  .appends-btn {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .common .el-button {
    background-color: #fff !important;
    border-color: #bbb !important;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-between;
  color: #fff;
  .lan {
    background-color: #2c9dfc !important;
    border-color: #2c9dfc !important;
  }
}

.dialog /deep/.el-form-item__label {
  width: 100px !important;
}
.dialog /deep/.el-form-item__content {
  margin-left: 100px !important;
  display: flex;
  justify-content: left;
}
.dialog /deep/.el-input {
  width: 250px;
}
.el-checkbox-group {
  line-height: 14px;
}
// .is-checked/deep/.el-radio__inner,
.is-checked/deep/.el-checkbox__inner {
  border-color: #999999;
  background: #999999;
}
// .el-radio/deep/.el-radio__inner:hover
//   border-color: #999999 !important;
//
.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
  color: #333;
}
.is-focus .el-checkbox__inner {
  border-color: #999999 !important;
}
.el-checkbox/deep/.el-checkbox__inner:hover {
  border-color: #999999 !important;
}
.el-step__head.is-process {
  border-color: #f96900;
  color: #f96900 !important;
}
.hintMsg {
  /deep/.el-dialog__header {
    display: flex;
    justify-content: center;
    font-weight: bold;
  }
  .dialog-footer {
    justify-content: center;
    .el-button {
      border-color: #2c9dfc !important;
      background: #2c9dfc !important;
    }
  }
}

//fiexed dialog 0902

/deep/ .el-dialog.el-dialog--center /deep/ {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 20px;
  }

  .hint {
    color: #f96900;
    background-color: #fff;
    padding: 0;
    padding-bottom: 20px;
  }

  .el-button {
    margin: 0;
  }
}
#star {
  position: absolute;
  color: red;
  margin-left: -176px;
}
.exam-img{
  position: absolute;
  top: 0;
  left: 445px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
</style>
